<template>
	<view class="order-page">

		<!-- 订单状态标签栏 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
				@click="switchTab(index)">
				{{ tab }}
			</view>
		</view>

		<!-- 订单列表区域 -->
		<view class="order-list">
			<!-- 空状态显示 -->
			<view class="empty-state" v-if="isEmpty">
				<uni-icons type="document" size="60" color="#ddd"></uni-icons>
				<text class="empty-text">暂无订单</text>
			</view>

			<!-- 订单列表，实际项目中根据activeTab和数据动态渲染 -->
			<view class="order-item" v-else>
				<!-- 订单项内容，这里仅作为示例 -->
				<view class="order-content">
					<text>订单示例</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单状态标签
				tabs: ['全部', '待支付', '待配送', '已配送', '已完成', '已退款'],
				// 当前激活的标签索引
				activeTab: 0,
				// 是否为空状态
				isEmpty: true
			};
		},
		methods: {
			// 切换标签
			switchTab(index) {
				this.activeTab = index;
				// 实际项目中这里可以根据标签索引加载对应的数据
				console.log('切换到:', this.tabs[index]);

				// 模拟数据加载，实际项目中根据接口返回结果设置isEmpty
				this.isEmpty = true;
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped>
	.order-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 标签栏样式 */
	.tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		background-color: #ffffff;
		padding: 10px 0;
		border-bottom: 1px solid #eeeeee;
	}

	.tab-item {
		flex: 0 0 auto;
		padding: 0 16px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #333333;
		white-space: nowrap;
	}

	.tab-item.active {
		color: #ff3b30;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 3px;
		background-color: #ff3b30;
		border-radius: 3px;
	}

	/* 订单列表样式 */
	.order-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999999;
	}

	.empty-text {
		margin-top: 16px;
		font-size: 14px;
		color: #999999;
	}

	/* 订单项样式 */
	.order-item {
		width: 100%;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 10px;
	}
</style>